<template>
    <div class="thirdView" :style="transScale">
        <!-- 头部 -->
        <div class="header">
            <div class="title">
                <span>{{ queryInfo.company }}</span>
                <span class="second">- 基本档案</span>
            </div>
            <!-- <search-view class="searchView"></search-view> -->
            <img class="chilun1" src="../../assets/images/bigViewIMG/chilun1.png" alt="">
            <img class="chilun2" src="../../assets/images/bigViewIMG/chilun2.png" alt="">
            <div class="dateTime">
                <div class="date">{{ date }}</div>
                <div class="time">{{ time }}</div>
                <div class="week">{{ weekDate }}</div>
            </div>
        </div>
        <!-- 导航 -->
        <div class="breadNav">
            <div class="left">
                <img src="@/assets/images/bigViewIMG2/weizhi.png" alt="">
                <div class="add">当前位置：</div>
            </div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item  :to="{ path: '/visual/bigscreen/viewer?reportCode=EArchives_first' }">企业E档案
                </el-breadcrumb-item>

                <el-breadcrumb-item  :to="{ path: topath }">档案全景</el-breadcrumb-item>
                <el-breadcrumb-item>基本档案</el-breadcrumb-item>

            </el-breadcrumb>
        </div>
        <!-- 主体内容 -->
        <!-- <div class="searchForm">
            <el-form :model="searchForm" ref="searchForm" inline  class="demo-ruleForm">
                <el-form-item>
                    <el-input  v-model="searchForm.searchValue" placeholder="请输入社会信用代码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
                    <el-button plain @click="clearForm" icon="el-icon-refresh">重置</el-button>
                </el-form-item>

            </el-form>
        </div> -->
        <div class="main">
            <div class="main-left">
                    <div class="left_1">
                        <basicFileOne :oneList="oneList" ></basicFileOne>
                    </div>
                    <div class="left_2">
                        <basicFileTwo></basicFileTwo>
                    </div>
                    <div class="left_3">
                        <basicFileThree  :oneList="oneList" ></basicFileThree>
                    </div>
            </div>
            <!-- 企业注册信息 -->
            <div class="main-center">
                <div class="image">
                    企业注册信息
                </div>
               <div class="companyName">
                    <div class="title">{{info.fullName? info.fullName :''}}</div>
                    <!-- <div class="_meta">
                        <span>{{ info.coClass }}</span>
                        <span v-for="(item,index) in info.enterpriseLabels" :key="index">{{ item }}</span>
                    </div> -->
               </div>
               <div class="classList" :class="showAll?'selected':''">
                    <span v-if="info.coClass">{{ info.coClass? info.coClass:'' }}</span>
                    <span v-for="(item,index) in info.enterpriseLabels" :key="index">{{ item }}</span>

               </div>
               <!-- 展开 -->
               <div class="zhankai" v-if="!showAll&&info.enterpriseLabels&&info.enterpriseLabels.length>5" @click="showAll=true">展开<i class="el-icon-arrow-down"></i></div>
               <!-- 收起 -->
                <div class="shouqi" v-if="showAll&&info.enterpriseLabels&&info.enterpriseLabels.length>5" @click="showAll = false">收起<i class="el-icon-arrow-up"></i></div>
               <div class="info">
                   
                    <div class="info_info">
                        <div class="left">
                            <span style="color:#fff">法人代表：</span>
                            <span style="color:#00ffff">{{ info.lawMan }}</span>
                        </div>
                        <div class="right">
                            <span style="color:#fff">法人电话：</span>
                            <span style="color:#00ffff">{{ info.lawManTel }}</span>
                        </div>
                    </div>
                    <div class="info_info">
                        <div class="left">
                            <span style="color:#fff">关务联系人：</span>
                            <span style="color:#00ffff">{{ info.contacCo }}</span>
                        </div>
                        <div class="right">
                            <span style="color:#fff">联系方式：</span>
                            <span style="color:#00ffff">{{ info.telCo}}</span>
                        </div>
                    </div>
                     <div class="info_info">
                            <div class="left">
                                <span style="color:#fff">企业注册编码：</span>
                                <span style="color:#00ffff">{{ info.tradeCo }}</span>
                            </div>
                            <div class="right">
                                <span style="color:#fff">企业信用代码：</span>
                            <span style="color:#00ffff">{{ info.socialCreditCode }}</span>
                        </div>
                    </div>
                    <div class="info_info">
                        <div class="left">
                            <span style="color:#fff">工商注册地址：</span>
                            <span style="color:#00ffff">{{ info.addrCo }}</span>
                        </div>
                        <div class="right">
                            <span style="color:#fff">统计经济区域：</span>
                            <span style="color:#00ffff">{{ info.tradeArea }}</span>
                        </div>
                    </div>
                    <div class="info_info">
                        <div class="left">
                            <span style="color:#fff">行政区划：</span>
                            <span style="color:#00ffff">{{ info.tradeAreaCodeCname}}</span>
                        </div>
                        <div class="right">
                            <span style="color:#fff">跨境贸易电子商务类型：</span>
                            <span style="color:#00ffff">{{ info.crossBorderTradeFlags }}</span>
                        </div>
                    </div>
                    <div class="info_info">
                        <div class="left">
                            <span style="color:#fff">行业种类：</span>
                            <span style="color:#00ffff">{{ info.busiType }}</span>
                        </div>
                        <div class="right">
                            <span style="color:#fff">进出口经营权威或报关权批准机关：</span>
                            <span style="color:#00ffff">{{ info.apprDepCname }}</span>
                        </div>
                    </div>
                    <div class="info_info">
                        <div class="left">
                            <span style="color:#fff">注册资本币制：</span>
                            <span style="color:#00ffff">{{ info.currCodeCname }}</span>
                        </div>
                        <div class="right">
                            <span style="color:#fff">注册资本：</span>
                            <span style="color:#00ffff">{{ info.rgFund }}</span>
                        </div>
                    </div>
                    <div class="info_info1">
                        <div class="left">
                            <span style="color:#fff">出资者：</span>
                            <span style="color:#00ffff">{{ info.invCo }}</span>
                        </div>
                       
                    </div>
               </div>
               <div class="bottom">
                    <div class="title">管理人员</div>
                   <div class="info">
                    <table border="0" cellspacing="0" cellpadding="0">
                    
                        <colgroup>
                            <col width="15%">
                            <col width="15%">
                            <col width="10%">
                            <col width="20%">
                            <col width="5%">
                            <col width="20%">
                            <col width="15%">
                        </colgroup>
                        <thead>
                            <th class="th1">姓名</th>
                            <th class="th2">职务</th>
                            <th class="th3">国籍</th>
                            <th class="th4">身份证</th>
                            <th class="th5">性别</th>
                            <th class="th6">联系电话</th>
                            <th class="th7">学历</th>
                        </thead>
                    </table>
                    <vue-seamless-scroll :data="info.manaVO" :class-option="optionHover" class="seamless-warp" v-if="info.manaVO[0]">
                        <ul>
                            <li v-for="(item,index) in info.manaVO" class="liStyle" :key="index">
                                <span class="title1 text_align">{{ item.managName }}</span>
                                <span class="title2 text_align">{{ item.managTitleCname }}</span>
                                <span class="title3 text_align">{{ item.managNatCname }}</span>
                                <span class="title4 text_align">{{ isAdvancedToken?item.managId:'*********' }}</span>
                                <span class="title5 text_align">{{ item.managSexCname }}</span>
                                <span class="title6 text_align">{{ isAdvancedToken?item.managTelBp:'*********' }}</span>
                                <span class="title7 text_align">{{ item.managDegreeCname }}</span>
                            </li>
                        </ul>
                    </vue-seamless-scroll>
                   </div>
               </div>

            </div>
            <div class="main-right">
                <div class="right_1">
                    <basicFileFour ></basicFileFour>
                </div>
                <div class="right_2">
                    <basicFileFive :oneList="oneList" ></basicFileFive>
                </div>
                <div class="right_3">
                    <basicFilSix></basicFilSix>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { decrypt, encrypt } from '@/utils/AES.js'
import Title from './components/title.vue'
// import searchView from './components/searchView.vue'

import { getDate, getTime, getWeekDate } from "@/utils/date.js";

import basicFileOne from './views/basicFileOne'
import basicFileTwo from './views/basicFileTwo'
import basicFileThree from './views/basicFileThree'
import basicFileFour from './views/basicFileFour'
import basicFileFive from './views/basicFileFive'
import basicFilSix from './views/basicFilSix'

import { getSecondViewDate } from '@/api/views/index.js'
import { reqFindEntryAccessNumByConsign } from '@/api/home/index.js'

export default {
    components: {
        Title,
        // searchView,
        basicFileOne,
        basicFileTwo,
        basicFileThree,
        basicFileFour,
        basicFileFive,
        basicFilSix
    },
    data() {
        return {
            showAll:false,
            client: ["1920", "1080"],
            scale_x: 1,
            scale_y: 1,
            date: "2021-01-01",
            time: "00:00:00",
            weekDate: "星期一",
            timer: null,
            searchForm:{
                searchValue:''
            },
            testArray: [
                // { name:'张三',job:'经理',nation:'中国',idCard:'***',sex:'男',phone:'1234567890',shcol:'博士' },
                // { name:'张三',job:'经理',nation:'中国',idCard:'***',sex:'男',phone:'1234567890',shcol:'博士' },
                // { name:'张三',job:'经理',nation:'中国',idCard:'***',sex:'男',phone:'1234567890',shcol:'博士' },
                // { name:'张三',job:'经理',nation:'中国',idCard:'***',sex:'男',phone:'1234567890',shcol:'博士' },
                // { name:'张三',job:'经理',nation:'中国',idCard:'***',sex:'男',phone:'1234567890',shcol:'博士' },
                // { name:'张三',job:'经理',nation:'中国',idCard:'***',sex:'男',phone:'1234567890',shcol:'博士' },
                // { name:'张三',job:'经理',nation:'中国',idCard:'***',sex:'男',phone:'1234567890',shcol:'博士' }
            ],
            info: {
                manaVO:[]
            },
            oneList:[],
           
        }
    },
    created() {
       
        
        this.getOneList()
        this.getList() 
       
    },
    computed: {
         isAdvancedToken(){
        // console.log(localStorage.getItem('TokenFlag'));
        return JSON.parse(localStorage.getItem('TokenFlag'))
        },
        queryInfo() {
            let query = JSON.parse(decrypt(this.$route.query.key))
           return query
        },
        optionHover() {
            return {
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                step: 0.3,// 数值越大速度滚动越快
                openWatch: true, // 开启数据实时监控刷新dom
                // limitMoveNum: 5, //开始滚动的数据量
                // singleHeight: 0, //单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                // singleWidth: 0, //单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                // waitTime: 1000 //单步运动停止的时间(默认值1000ms)
            }
        },
        topath(){
            let query = JSON.parse(decrypt(this.$route.query.key))
            let keyInfo = encrypt(JSON.stringify({
                company: query.company,
                tradeCo: query.tradeCo
            }))
            let code = encodeURIComponent(keyInfo)
            return `/visual/bigscreen/viewer?reportCode=SecondView&key=${code}`
           
        },
        transScale() {
            return `transform: scale(${this.scale_x}, ${this.scale_y});
              background-size: 100% 100%;
              transform-origin: left top; 
              overflow: hidden;
              width:${this.client[0]}px;height:${this.client[1]}px;position: absolute;`;
        }
    },
    mounted() {
        this.initClock();
        this.timer = setInterval(() => {
            this.initClock();
        }, 1000);
        window.addEventListener("resize", this.resizeHandler);
        this.resizeHandler();
    },
    watch:{
        
        $route:{
            handler(val){
                if (val.path =='/visual/thirdView/basicFileMap') {
                    this.getList()
                    this.getOneList()
                }else {
                    return
                }
               
            },
            deep:true
        }    
    },
    methods: {
         // 判断权限
      
        async getOneList(){
            let query = JSON.parse(decrypt(this.$route.query.key))
            // console.log(query,'aes');
            const res = await reqFindEntryAccessNumByConsign({  consignCode: query.tradeCo })
            
            this.oneList=res.data
           
        },
        async getList(){
            let query = JSON.parse(decrypt(this.$route.query.key))
            const res = await getSecondViewDate(query.tradeCo)
             this.info=res.data
            // console.log('eeeeeeeeeeeeee', this.isAdvancedToken)
            // if(!this.isAdvancedToken){
            //       let arr=res.data.manaVO
            //     arr.forEach(item=>{
            //     item.managId='**********'
            //             item.managTelBp='**********'
                
            //     })
            
            //     this.info = {
            //         ...res.data,
            //         manaVO:arr
            //     }
            // }else {
            //     this.info=res.data
            // }
          
        },
        clearForm(){
            this.searchForm.searchValue=''
        },
        search(){
            // console.log(this.searchForm.searchValue);
        },
        initClock() {
            this.date = getDate();
            this.time = getTime();
            this.weekDate = getWeekDate();
        },
       
        resizeHandler() {
            this.scale_x = `${document.documentElement.clientWidth}` / this.client[0];
            this.scale_y = `${document.documentElement.clientHeight}` / this.client[1];
        },

    },
    beforeDestroy() {
        if(this.timer) {
            clearInterval(this.timer);
        }
        
        window.removeEventListener("resize", this.resizeHandler);
    },
}
</script>

<style lang="scss" scoped>

.thirdView {
    width: 100%;
    height: 100%;
    background: url('../../assets/images/bigViewIMG/bg.png') no-repeat;
    background-size: 100% 100%;

    // padding: 0 20px;
    .header {
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: center;

        .title {
            display: flex;
            justify-content: center;
            align-items: center;
            justify-content: center;

            width: 100%;
            height: 70px;
            background-image: url('../../assets/images/bigViewIMG/navbar.png');
            background-size: 100% 100%;

            span {
                font-size: 32px;
                color: #00ffff;
                font-weight: 400;
            }

            .second {
                margin-left: 5px;
                font-size: 32px;
                color: #00ffff;
                font-weight: 400;
                // font-family: '华文楷体'
            }
        }

        .searchView {
            position: absolute;
            top: 22px;
            left: 23px;
        }

        .chilun1 {
            width: 138px;
            height: 48px;
            position: absolute;
            top: 22px;
            left: 1252px;
        }

        .chilun2 {
            width: 138px;
            height: 48px;
            position: absolute;
            top: 22px;
            left: 506px;
        }

        .dateTime {
            position: absolute;
            top: 20px;
            left: 1575px;
            width: 325px;
            height: 36px;
            display: flex;
            color: #fff;
            // text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 22px;

            .time {
                margin-left: 5px;
            }

            .week {
                margin-left: 5px;
            }
        }
    }

    .breadNav {
        margin-left: 10px;
        height: 40px;
        display: flex;
        align-items: center;

        .left {
            display: flex;
            align-items: center;

            img {
                width: 16px;
                height: 16px;
            }

            .add {
                margin-left: 10px;
                margin-right: 10px;
                color: #fff;
                font-size: 16px;
            }
        }

        ::v-deep .el-breadcrumb {
            .el-breadcrumb__item {
                .el-breadcrumb__inner {
                    color: #00ffff;
                    font-size: 16px;
                }

                .is-link {
                    color: #fff;
                }
            }
        }
    }
    .searchForm {
        width: 100%;
        display: flex;
        justify-content: center;
        .demo-ruleForm {
            ::v-deep .el-form-item {
                .el-input {
                    .el-input__inner {
                        height: 31px;
                            line-height: 30px;
                        
                        width: 300px;
                        font-size: 14px;
                    }
                }
                .el-button {
                    padding: 9px 15px;
                }
            }
        }
    }
    .main {
        display: flex;
        background: url('../../assets/images/bigViewIMG3/border.png') no-repeat;
        background-size: 99% 100%;
        .main-left {
            width: 520px;
            height: 100%;

            .left_1 {
                margin-top: 40px;
                width: 500px;
                height: 250px;
              
            }
            .left_2 {
                margin-top: 40px;
                width: 500px;
                height: 290px;
               
            }
            .left_3 {
                margin-top: 10px;
                width: 500px;
                height: 250px;
               
            }
        }
        .main-center {
            position: relative;
            flex:1;
            height: 100%;
            padding: 0 50px;
            .image {
                position: absolute;
                top: 56px;
                left: 300px;
                font-size: 18px;
                width: 250px;
                color: #00ffff;
                height: 40px;
                background:url('../../assets/images/info.png') no-repeat;
                display: flex;
                justify-content: center;
                align-items:center;
            }
           .companyName {
            margin-top: 120px;
            .title {
                color: #fff;
                font-size: 18px;
            }
            // ._meta {
            //     margin-top: 10px;
            //     display: flex;
            //     // flex-direction: column;
            //     span {
            //         color: #fff;
            //         padding: 5px 10px ;
            //         background-color: #006fff;
            //         font-size: 14px;
            //         border-radius: 5px;
            //     }
            // }

           }
           .classList {
            margin-top: 10px;
            max-height: 80px;
            overflow: hidden;
            span {
                    margin:10px;
                    color: #fff;
                    padding: 4px 10px ;
                    background-color: #006fff;
                    font-size: 14px;
                    border-radius: 5px;
                    line-height: 40px;
                    white-space:nowrap
                }
           }
           .selected {
              margin-top: 10px;
                max-height: 180px;
                overflow: auto;
           }
           .zhankai {
            font-size: 14px;
                text-align: end;
                color: #00ffff;
                cursor: pointer;
           }
           .shouqi {
            font-size: 14px;
                text-align: end;
                color: #00ffff;
                cursor: pointer;
           }
           .info {
            margin-top:10px;
            .info_info {
                display: flex;
                font-size: 14px;
                margin-bottom: 25px;
                .left {
                    flex:1
                }
                .right {
                    flex:1
                }
            }
            .info_info1 {
                display: flex;
                    font-size: 14px;
                    margin-bottom: 10px;
                
                    .left {
                        flex: 1
                    }
            }
           }
           .bottom {
            .title {
                font-size: 14px;
                color: #fff;
                margin-bottom: 10px;
            }
               .info {
                * {
                        margin: 0;
                        padding: 0;
                        /*font-weight: normal;*/
                    }
                ul {
                        list-style: none;
                    }
                
                    table {
                        width: 100%;
                        text-align: center;
                
                    }
                
                    thead {
                        border-radius: 10px;
                    }
                
                    th {
                        height: 30px;
                        line-height: 30px;
                        font-size: 14px;
                        background-color: rgba(113, 169, 218, 0.5);
                
                        color: #fff;
                
                    }
                
                    .th1 {
                        border-top-left-radius: 5px;
                        border-bottom-left-radius: 5px;
                    }
                
                    .th7 {
                        border-top-right-radius: 5px;
                        border-bottom-right-radius: 5px;
                    }
                
                    .seamless-warp {
                        height: 100px;
                        overflow: hidden;
                        ul {
                            padding: 0;
                        }
                        .liStyle {
                            height: 30px;
                            line-height: 30px;
                            background-color: rgba(11, 130, 235, 0.2);
                            margin-top: 5px;
                            width: 100%;
                            display: flex; //设置flex布局，否则span标签无法设置宽度
                            color: #fff;
                            text-align: center;
                            border-radius: 5px;
                
                            //设置宽度与表头列宽一致
                            .title1 {
                                width: 15%;
                                // border-top-left-radius: 5px;
                                //     border-bottom-left-radius: 5px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                
                            .title2 {
                                width: 15%;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                
                            .title3 {
                                width: 10%;
                
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                
                            }
                
                            .title4 {
                                width: 20%;
                
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                
                            }
                
                            .title5 {
                                width: 5%;
                
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                
                            }
                            .title6 {
                                width: 20%;

                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;

                            }
                            .title7 {
                                width: 15%;

                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;

                            }
                
                            .text_align {
                                text-align: center;
                            }
                        }
                    }
               }        
           }
        }
        .main-right {
            width: 520px;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            .right_1 {
                margin-top: 40px;
                    width: 500px;
                    height: 250px;
                  
            }
            .right_2 {
                margin-top: 40px;
                width: 500px;
                height: 250px;
               
            }
            .right_3 {
                margin-top: 40px;
                width: 500px;
                height: 250px;
               
            }

        }
    }
}
</style>